<template>
  <div ref="Graph"></div>
</template>

<script setup lang="ts">
import { FlowGraph } from "../common/FlowGraph";
import { onMounted, PropType, toRefs, ref, watch, onBeforeUnmount } from "vue";
import { stencilNodeOptions } from "../common/Stencil/config";
import { graphWidth, graphHeight } from "../config/index";
import { useRoute } from "vue-router";


// 引入注册节点 否则节点类型未定义报错
const groups = stencilNodeOptions.map((e) => e.group);
const emit = defineEmits(["onReady", "update:isReady"]);
const props = defineProps({
  graphType: {
    type: String,
    default: ""
  }
});
const Graph = ref<HTMLElement | undefined>();
const route = useRoute();
let graph: any = null;
onMounted(() => {
  // 创建画布
  graph = FlowGraph.init({
    container: Graph.value,
    width: graphWidth,
    height: graphHeight
    // resizing: true,
    // // 是否开启画布拖拽
    // panning: false,
    // // 是否显示画布网格
    // grid: {
    //   visible: false
    // },
    // // 点选框选
    // selecting: false,
  });
  // 初始化画布节点信息
  initGraphData();
  // graph.fromJSON(initData);
  // xg 2023/8/23 删除了基础节点后，因缺少节点导致初始化时控制台报错问题修复  ----start
  // let chartTemplate: any = ref([])
  // graph.fromJSON(initData);
  // graph.centerContent();
  // emit('onReady', graph);
  // emit('update:isReady', true);
  // getChartTemplateList('aa6ea58507ada7942805352dd729b655').then(res => {
  //   if(res.code === ResultEnum.SUCCESS) {
  //     if(props.graphType == 'tree') {
  //       res.data.forEach(item => {
  //         if(item.type === 1) {
  //           chartTemplate = JSON.parse(item.detail)
  //         }
  //       })
  //       message.success('任务图模板查询成功');
  //     } else if(props.graphType == 'step') {
  //       res.data.forEach(item => {
  //         if(item.type === 2) {
  //           chartTemplate = JSON.parse(item.detail)
  //         }
  //       })
  //       message.success('决策树查询成功');
  //     }
  //     console.log("chartTemplate",chartTemplate)
  //     graph.fromJSON(chartTemplate);
  //   }
  // })
  // xg 2023/8/23 删除了基础节点后，因缺少节点导致初始化时控制台报错问题修复  ----end
  graph.centerContent();
  emit("onReady", graph);
  emit("update:isReady", true);
});

function initGraphData() {
  let id = route.params.id;
  // getTreeDetial(id).then(res => {
  //   if (res.data) {
  //     graph.fromJSON(JSON.parse(res.data));
  //     getWebsocketMsg();
  //     // console.log("getNodes",graph.getNodes())
  //     // graph.getNodes().map(node=>{
  //     //   console.log(node)
  //     //   node.attr('text/text','123465')
  //     //   graph.on('node:show-tip',({view,e})=>{
  //     //     e.stopPropagation()
  //     //     view.showTip('This is a tip for the node')
  //     //   })
  //     // })
  //   }
  // });
}

// function getWebsocketMsg() {
//   let socketUrl = String(globSetting.JCSOCKET);
//
//   let agentData = { type: 1, treeId: route.params.id };
//   sendWebsocket(socketUrl, agentData, (e) => {
//     changeNode(e);
//   }, (e) => {
//     // console.log(e);
//   });
// }

function changeNode(e) {
  let nodes = graph.getNodes();
  nodes.map(item => {
    if (item.id == e.frontedId) {
      item.attr("text/text", `${item.store.data.name}${e.data.data}`);   //更改label里面的内容
      item.size(160, item.size().height); //更改元素宽度
      // console.log('item',item)
    }
  });
}

onBeforeUnmount(() => {
  graph?.dispose();
  graph = null;
});
</script>
